<template>
  <div class="boxInfo">
    <!-- 数据表格 -->
    <div class="fr clearfix searchInfo">
      <!-- <div class="serachInput">
        <el-input
          v-model="requestParameters.keyword"
          placeholder="搜索"
          clearable
          @keyup.enter.native="dataSearch(itemes,index)"
        />
      </div> -->
      <!-- <el-input v-model="requestParameters.keyword" placeholder="请输入姓名" @click="handleSearch"></el-input> -->
      <!-- <a
        class="el-button fr el-button--primary el-button--mini"
        title="导出"
        @click="handelFileDownload"
      >导出</a> -->
      <el-button
        type="primary"
        size="medium"
        @click="handelFileDownload"
      >导出</el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="loading"
      :data="dataList"
      element-loading-text="给我一点时间"
      fit
      highlight-current-row
      style="width: 100%"
      border
    >
      <el-table-column prop="name" label="姓名" width="100" />
      <el-table-column prop="workNumber" label="工号" width="90" />
      <el-table-column prop="mobile" label="手机号" width="120" />
      <el-table-column prop="department" label="部门" width="100" />
      <el-table-column prop="leaveDays" label="事假" width="80" />
      <el-table-column prop="dayOffLeaveDays" label="调休" width="80" />
      <el-table-column prop="normalDays" label="正常" width="80" />
      <el-table-column prop="laterTimes" label="迟到次数" width="100" />
      <el-table-column prop="earlyTimes" label="早退次数" width="100" />
      <el-table-column
        prop="averageDailyNaturalDays"
        label="日均时长"
        width="100"
      />
      <el-table-column prop="absenceDays" label="旷工天数" width="100" />
      <el-table-column
        prop="whetherItIsFullOfWork"
        label="是否全勤"
        width="100"
      />
      <el-table-column
        prop="actualAttendanceDaysAreOfficial"
        label="实际出勤天数"
        width="110"
      />
      <el-table-column prop="attendanceDay" label="应出勤工作日" width="120" />
      <el-table-column prop="salaryStandard" label="计薪标准" width="100" />
      <el-table-column prop="officialSalaryDays" label="计薪天数" width="100" />
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :page-size="requestParameters.pagesize"
        layout="total, prev, pager, next"
        :total="Number(counts)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- end -->
    <!-- 数据表格 / -->
    <div class="butList">
      <el-tooltip
        class="item"
        effect="dark"
        content="将当前报表存放至归档，归档可以多次，但只保留最后一次"
        placement="top-start"
      >
        <el-button
          type="primary"
          size="small"
          @click="archivingReportForm"
        >归档{{ month }}月份报表</el-button>
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="开始做下月考勤"
        placement="top-start"
      >
        <el-button
          type="primary"
          size="small"
          @click="createReportForm"
        >新建报表</el-button>
      </el-tooltip>
      <!-- <el-button @click="handleRest">取消</el-button> -->
    </div>
  </div>
</template>

<script>
import { archives, newReports, reportFormList } from '@/api/attendances'
// import { importDown } from '@/api/employees'
// import XLSX from 'xlsx'
// import FileSaver from 'file-saver'
// import { getBlob } from '@/filters'

export default {
  name: 'RefortList',
  data() {
    return {
      // baseData: [],
      dataList: [],
      seleList: [],
      text: '', // 新增、编辑文本
      tableKey: 0,
      counts: '',
      barSearch: {
        alertText: ''
      },
      requestParameters: {
        atteDate: ''
      },
      isArchived: '',
      loading: false,
      centerDialogVisible: false,
      infoTip: '',
      month: this.$route.params.month
    }
  },
  computed: {
    // 模糊搜索
    list() {
      const search = this.requestParameters.keyword
      if (search) {
        return this.dataList.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.dataList
    }
  },
  // 创建完毕状态
  created() {
    this.requestParameters.atteDate = this.yearMonth
    this.reportFormList()
  },
  // 组件更新
  methods: {
    // 业务方法
    async reportFormList(params) {
      this.loading = true
      this.dataList = await reportFormList(this.requestParameters)
      this.loading = false
    },
    // 新增用户刷新列表
    handleLoadDataList() {
      this.reportFormList()
    },
    // 归档
    archivingReportForm() {
      var departmentId = this.requestParameters.departmentId
      var atteDate = {
        departmentId: departmentId,
        atteDate: this.month
      }
      this.$confirm(
        '该月报表已归档过，重新归档将覆盖上一份报表，您确认要再次归档吗？',
        '归档' + this.month + '报表'
      ).then(async() => {
        await archives(atteDate)
        this.$message.success('归档成功')
      })
    },
    // 新建报表
    createReportForm() {
      this.$confirm(
        '新建报表会使得' +
          this.month +
          '月报表不能修改，且您上一次归档之后的修改将不会被保存。您确定现在就开始做下月考勤吗？',
        '新建' + parseInt(Number(this.month) + Number(1)) + '报表'
      ).then(async() => {
        // const nextMonth = this.getNextMonth(this.yearMonth)
        var atteTime =
          this.month.substring(0, 4) + '-' + this.month.substring(4)
        atteTime = this.getNextMonth(atteTime).datas.replace('-', '')
        this.requestParameters.yearMonth = atteTime
        await newReports(this.requestParameters)
        this.$message.success('新建报表成功！')
        this.$router.push('/attendances')
      })
    },
    // 获取下一个月
    getNextMonth: function(date) {
      var arr = date.split('-')
      var year = arr[0] // 获取当前日期的年份
      var month = arr[1] // 获取当前日期的月份
      var year2 = year
      var month2 = parseInt(month) + 1
      if (month2 === 13) {
        year2 = parseInt(year2) + 1
        month2 = 1
      }

      if (month2 < 10) {
        month2 = '0' + month2
      }

      var datas = year2 + '-' + month2
      var months = month2
      return {
        datas: datas,
        months: months
      }
    },
    // 每页显示信息条数
    handleSizeChange(pageSize) {
      this.requestParameters.pagesize = pageSize
      if (this.requestParameters.page === 1) {
        this.reportFormList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.page = val
      this.reportFormList()
    },
    // 下载文件
    handelFileDownload() {
      try {
        import('@/vendor/Export2Excel').then((excel) => {
          const tHeader = [
            '姓名',
            '工号',
            '手机号',
            '部门',
            '事假',
            '调休',
            '正常',
            '迟到次数',
            '早退次数',
            '日均时长',
            '旷工天数',
            '是否全勤',
            '实际出勤天数',
            '应出勤工作日',
            '计薪标准',
            '计薪天数'
          ] // 表头 必填

          const filterVal = [
            'name',
            'workNumber',
            'mobile',
            'department',
            'leaveDays',
            'dayOffLeaveDays',
            'normalDays',
            'laterTimes',
            'earlyTimes',
            'averageDailyNaturalDays',
            'absenceDays',
            'whetherItIsFullOfWork',
            'actualAttendanceDaysAreOfficial',
            'attendanceDay',
            'salaryStandard',
            'officialSalaryDays'
          ]
          const data = this.formatJson(filterVal, this.dataList)
          excel.export_json_to_excel({
            header: tHeader,
            data: data,
            filename: '人事报表',
            autoWidth: true,
            bookType: 'xlsx'
          })
        })
      } catch (error) {
        this.$message.error(error)
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j]
        })
      )
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.el-message-box--center .el-message-box__content p {
  text-align: left;
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '../../../styles/variables.scss';
.butList {
  // border-top: solid 1px #f4f4f4;
  margin-top: 15px;
  text-align: center;
  background: #fff;
  span {
    display: inline-block;
    background: $green;
    color: #fff;
    padding: 8px 20px;
    border-radius: 3px;
    margin: 10px;
    cursor: pointer;
  }
  .cancel {
    background: #ccc;
    color: #666;
  }
}
</style>
